<template>
  <div class="echarts">
    <div
      id="echartslwt"
      style="width: 350px; height: 230px; transform: scale(0.9)"
    ></div>
  </div>
</template>
 
<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
// 引入饼状图组件
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
export default {
  data() {
    return {
      currentObj: [],
      currentObj1: [],
      arr: 0,
    };
  },
  props: {
    // echartObj: {
    //   type: Array,
    //   default: () => [],
    // },
  },
  created() {
    // this.$nextTick(() => {
    //   this.loadEchart();
    // });
  },
  mounted() {
    // let _this = this;
    // window.onresize = function () {
    //   _this.myChart.resize();
    // };
  },
  methods: {
    loadEchart(gsres, dwres) {
      console.log(gsres);
      console.log(dwres);
      this.currentObj = gsres;
      this.currentObj1 = dwres;
      var Data = this.currentObj[0].sl;
      this.currentObj1.forEach((item) => {
        this.arr += item.sl;
      });
      var Data1 = this.arr;
      // this.currentObj
      //   .reverse()
      //   .slice(0, 10)
      //   .reverse()
      //   .forEach((item) => {
      //     Data.push(item.name);
      //     Data1.push(item.sl);
      //   });
      this.myChart = echarts.init(document.getElementById("echartslwt"));
      this.myChart.setOption({
        title: {
          left: "center",
          text: "三老问题",
          subtext: "数据来自超高压",
          textStyle: {
            color: "white", //字体颜色
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: "item",
        },
        grid: {
          top: 80,
          left: "left",
          right: '5%',
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          orient: "vertical",
          left: "left",
          textStyle: {
            fontSize: 13, //字体大小
            color: "white", //字体颜色
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            label: {
              //饼图图形上的文本标签
              normal: {
                show: true,
                position: "inner", //标签的位置
                textStyle: {
                  fontWeight: 300,
                  color:"white",
                  fontSize: 14, //文字的字体大小
                },
                // formatter: "{b}:{c}: ({d}%)",
                formatter: "{b}:{c}({d}%)",
              },
            },
            data: [
              {
                value: Data,
                name: "公司发现三老",
                itemStyle: {
                  normal: {
                    color: "#E67716",
                  },
                },
              },
              {
                value: Data1,
                name: "单位发现三老",
                itemStyle: {
                  normal: {
                    color: "#FBC300",
                  },
                },
              },
              {
                value: Data + Data1,
                name: "全部三老问题",
                itemStyle: {
                  normal: {
                    color: "#0c7ef2",
                  },
                },
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
};
</script>
 
<style lang='less' scoped>
</style>